<style>
  *{
    margin: 0;
    padding: 0;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
}
.header{
    width: 100%;
    height: 40px;
    background-color: #333;
}
.header .content-left{
    height: 100%;
    margin-left: 145px;
    float: left;
    position: relative;
}
.header .content-left .li1 div{
    position: absolute;
    top: 40px;
    left: -60px;
    width: 140px;
    height: 166px;
    display: none;
    background-color: #fff;
}
.header .content-left div{
    text-align:center;
}
.header .content-left div span{
    font-size: 12px;
    color: #000;
}
.header .content-left div img{
    display: block;
    margin:0 auto;
    margin-top: 10px;
}
.header .content-left .li1:hover div{
    display: block;
}
.header .content-left .li2 div{
    position: absolute;
    top: 40px;
    left: 0px;
    width: 140px;
    height: 166px;
    display: none;
    background-color: #fff;
}
.header .content-left .li2:hover div{
    display: block;
}
.header li{
    float: left;
    height: 100%;
    line-height: 40px;
    margin-right: 20px;
    color: #ccc;
}
.header li a{
    color: #fff;
    font-size: 12px;
    vertical-align: top;
}
.header .content-right{
    height: 100%;
    margin-right: 145px;
    float: right;
    line-height: 40px;
}
.header .content-right .icon1{
    width: 12px;
    height: 11px;
    background: url('/images/css_sprites.png') -78px -174px;
    display:inline-block ;
    margin-right: 10px;
}
.header .content-right .icon2{
    width: 12px;
    height: 11px;
    background: url('/images/css_sprites.png') -10px -197px;
    display: inline-block;
    margin-right: 10px;
}
</style>
<div class="header">
  <ul class="content-left">
      <li class="li1"><a href="">关注</a><div><img src="/images/weChat.jpg"><span>关注公众号</span></div></li>
      <li class="li2"><a href="">下载APP</a><div><img src="/images/app.jpg" style="width: 120px;height: 120px;"><span>关注公众号</span></div></li>
  </ul>
  <ul class="content-right">
      <li class="login1" style="margin-right: 10px;"><a href="../html/login.html">登录</a></li>
      <li class="login2" style="margin-right: 10px;">/</li>
      <li class="login3"><a href="../html/register.html">注册</a></li>
      <li><a href=""><i class="icon1"></i>收藏</a></li>
      <li><a href="../html/cart.html"><i class="icon2"></i>购物袋</a></li>
      <li><a href="">公告</a></li>
  </ul>
</div>


<script>
    require(['config'], function() {
        require(['jquery', 'jquery.cookie'], function() {
            
            $.cookie.json = true
            const userlist = $.cookie('userlist') || []

            $(document).ready(function(){
            const index = userlist.findIndex(user =>user.online == 1)
            if (index !== -1) { // 存在已选购的当前商品
                $('.login1').html(`<a href="#" class='user'>欢迎，${userlist[index].username}</a>`)
                $('.login3').html(`<a href="#" class='exit'>退出登录</a>`)
            }})
            
            $('.user').click(()=>{
                console.log(userlist)
            })
            $('.exit').click(()=>{
                for(let i=0;i<userlist.length;i++){
                    userlist[i].online=0
                }
                $.cookie('userlist', userlist, {expires: 70,path:'/'})
                window.location.reload()
            })

        })
    })
</script>